﻿@using EasyUIDemo1.Helpers;
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/StyleSheet.css")" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Scripts/themes/default/easyui.css")" />
	<link rel="stylesheet" type="text/css" href="@Url.Content("~/Scripts/themes/icon.css")" />
    @*<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />*@
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"  type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript" ></script>

    <script type="text/javascript">
        function allProperties(obj) {
            //alert("sss");
            if (typeof (obj) === "undefined" || obj === null) {
                return "undefined";
            }
            var properties = "";
            for (var p in obj) {
                if (typeof (obj[p]) === "function") {
                    //alert("function");
                    var f = obj[p].toString();
                    if (f.length > 20) {
                        properties += f.substr(0.20) + "\r\n";
                    }
                    else {
                        properties += f + "\r\n" ;
                    }

                }
                else {
                    //alert("property");
                    properties += p + " = " + obj[p] + "\r\n";
                }
            }
            alert(properties);
            return properties;
        }
        $(function () {
            $('#tabControl').tabs({
                tools: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        alert('add');
                    }
                }, {
                    iconCls: 'icon-save',
                    handler: function () {
                        alert('save');
                    }
                }]
            });
        });

        function createFrame(url, id) {
            var frameId = "XX";
            if (typeof (dom) === "undefined" || dom === null) {

            }
            else {
                frameId = id;
            }
            var s = '<iframe id="iframe' + frameId + '" name="mainFrame" scrolling="no" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            return s;
        }
        var index = 0;
//        function addTab() {
//            index++;
//            var tab = $('#tabControl').tabs('add', {
//                title: 'New Tab ' + index,
//                content: 'Tab Body ' + index,
//                iconCls: 'icon-save',
//                closable: true
//            });
//            alert(tab);
//        }

        function addTab(subtitle, url) {
            if (!$('#tabControl').tabs('exists', subtitle)) {
                $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: createFrame(url),
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabs').tabs('select', subtitle);
            }
            //tabClose();
        }

        function addTabWithContent(subtitle, url) {
            var tab = null;
            if (!$('#tabControl').tabs('exists', subtitle)) {
                tab = $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: "<table id='tblIndustry'></table>",
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabControl').tabs('select', subtitle);
            }
            //tabClose();
            //alert($("#tabControl").children().last().html());
            //alert($('#tblIndustry'));
            $('#tblIndustry').datagrid({
                title: subtitle,
                iconCls: 'icon-save',
                width: 800,
                height: 650,
                nowrap: false,
                striped: true,
                collapsible: true,
                url: url,
                sortName: 'ID',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'ID',
                frozenColumns: [[
	                { field: 'ck', checkbox: true },
	                { field: 'ID', title: 'code', width: 80, sortable: true }
				]],
                columns: [[
			        { title: 'Base Information', colspan: 3 },
					{ field: 'opt', title: 'Operation', width: 100, align: 'center', rowspan: 2,
					    formatter: function (value, rec) {
					        return '<span style="color:red">Edit Delete</span>';
					    }
					}
				], [
					{ field: 'Name', title: 'Name', width: 120 },
					{ field: 'InstitutionCode', title: 'Address', width: 120, rowspan: 2, sortable: true,
					    sorter: function (a, b) {
					        return (a > b ? 1 : -1);
					    }
					},
					{ field: 'QueryCode', title: 'Col41', width: 150, rowspan: 2 }
				]],
                pagination: true,
                rownumbers: true,
                toolbar: [{
                    id: 'btnadd',
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('add')
                    }
                }, {
                    id: 'btncut',
                    text: 'Cut',
                    iconCls: 'icon-cut',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('cut')
                    }
                }, '-', {
                    id: 'btnsave',
                    text: 'Save',
                    disabled: true,
                    iconCls: 'icon-save',
                    handler: function () {
                        $('#btnsave').linkbutton('disable');
                        alert('save')
                    }
                }]
            });
            var p = $('#tblIndustry').datagrid('getPager');
            if (p) {
                $(p).pagination({
                    onBeforeRefresh: function () {
                        alert('before refresh');
                    }
                });
            }

        }


        $(function () {

            //setInterval(ajaxRequest, 1000);
//            $.ajax({
//                type: "GET",
//                url: '<%= Url.Action("SleepFor2Seconds", "Home") %>',
//                data: "{}",
//                cache: false,
//                beforeSend: showProgressDialog,
//                complete: hideProgressDialog
//            });
        });
        function ajaxRequest() {
            $.ajax({
                url: '/TopDemo/Home/ErrorRefresh',      // 指定调用的URL，对应于Controller  
                data: '{}',                             // 如果请求有参数，需要在这里指定  
                type: "POST",                           // 请求类型  
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data) {              // 请求成功后的回调  
                    if (data == null || data.length == 0) {
                        return false;
                    } else {
                        writeMsg(data);
                    }
                },
                error: function (data) {                // 请求失败后的回调  
                    alert(data.statusText);
                }
            });
        }

        function writeMsg(data) {
            var errorDiv = document.getElementById("errorDiv");
            for (var i = 0; i < data.length; i++) {
                var errorText = document.createTextNode(data[i].errMsg);
                var errorTextDiv = document.createElement("div");
                errorTextDiv.appendChild(errorText);
                if (errorDiv.hasChildNodes) {
                    errorDiv.insertBefore(errorTextDiv, errorDiv.firstChild);
                } else {
                    errorDiv.appendChild(errorTextDiv);
                }
            }
        }
        function getHtml(dom) {
            var log = document.getElementById("TraceConsole");
            if (typeof (dom) === "undefined" || dom === null) {
                log.value = document.documentElement.outerHTML;
            }
            else {
                log.value = document.getElementById(dom).outerHTML;
            }
            log.parentNode.style.display = "block";
        }

        function addTab1(subtitle) {
            var tab = null;
            if (!$('#tabControl').tabs('exists', subtitle)) {
                tab = $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: "<form id=\"form2\"><div id=\"logRegion\" style=\"display: none;\"><textarea id=\"TraceConsole\" rows=\"100\" cols=\"160\"></textarea><a id=\"btnHide\" href=\"javascript:void();\" onclick=\"this.parentNode.style.display = 'none';\">隐藏</a>    </div>    </form>",
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabControl').tabs('select', subtitle);
            }

            getHtml();
        }

        function addTab2(subtitle, obj) {
            var tab = null;
            if (!$('#tabControl').tabs('exists', subtitle)) {
                tab = $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: "<div id=\"logRegion2\" style=\"display: none;\"><textarea id=\"TraceConsole\" rows=\"100\" cols=\"160\"></textarea><a id=\"btnHide\" href=\"javascript:void();\" onclick=\"this.parentNode.style.display = 'none';\">隐藏</a> </div>",
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabControl').tabs('select', subtitle);
            }

            var log = document.getElementById("TraceConsole");
            
            var ps = allProperties(obj);
            log.value = ps;
            log.parentNode.style.display = "block";
        }
    </script>

</head>

<body class="easyui-layout">
    <div id="mymenu" style="width: 150px;">
        <div>item1</div>
        <div>item2</div>
    </div>
    <div  id="northPanel" region="north" title="North Title" split="true" style="height: 100px; padding: 10px;">
        <p>@Html.Partial("_LogOnPartial")</p>
        <p> n1</p>
        <p> n2</p>
        <p> n3</p>
        <p> n4</p>
        <p> n5</p>
    </div>
    <div  id="southPanel" region="south" title="South Title" split="true" style="height: 100px; padding: 10px;  background: #efefef;">
        <div class="easyui-layout" fit="true" style="background: #ccc;">
            <div region="center"> sub center</div>
            <div region="east" split="true" style="width: 200px;"> sub center</div>
        </div>
    </div>
    <div id="eastPanel" region="east" iconcls="icon-reload" title="Tree Menu" split="true" style="width: 180px;">
        <ul class="easyui-tree" url="tree_data.json">
        </ul>
    </div>
    <div  id="westPanel" region="west" split="true" title="West Menu" style="width: 280px; padding: 1px;   overflow: hidden;">
        <div class="easyui-accordion" fit="true" border="false">
            <div class="accordion-panel" title="Title1" selected="true" style="overflow: auto;">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLinkForJS("超链接显示的文字", new { onclick = "addTab('TabTitle', '" + Url.Action("Index", "Database") + "')" })</li>
                    <li>@Html.ActionLinkForJS("获取数据", new { onclick = "addTabWithContent('获取数据', '" + Url.Action("Industry", "Database") + "')" })</li>
                    <li>@Html.ActionLinkForJS("产生行业脚本", new { onclick = "addTab('产生脚本', '" + Url.Action("GenerateIndustrySQL", "Database") + "')" })</li>
                    <li>@Html.ActionLinkForJS("产生性质脚本", new { onclick = "addTab('产生脚本', '" + Url.Action("GenerateCategorySQL", "Database") + "')" })</li>
                    <li>@Html.ActionLinkForJS("产生单位脚本", new { onclick = "addTab('产生脚本', '" + Url.Action("GenerateSQL", "Database") + "')" })</li>
                    <li><a href="javascript:void(0);" onclick="addTab1('fff')"> 网页源码</a></li>
                    <li><a href="javascript:void(0);" onclick="addTab2('fff', jQuery)"> jQeruy的方法</a></li>
                    <li>@Html.ActionLinkForJS("单位数据", new { onclick = "addTab('单位数据', '" + Url.Action("Institution", "Database") + "')" })</li>
                    <li>@Html.ActionLinkForJS("产生单位脚本", new { onclick = "addTab('产生单位脚本', '" + Url.Action("Institution", "Database") + "')" })</li>
                    <li>@Html.ActionLinkForJS("产生人员脚本", new { onclick = "addTab('产生人员脚本', '" + Url.Action("GenerateEmpSQL", "Database") + "')" }, new { src = "/Content/images/61.png", alt = "" })</li>
                    
                </ul>
                <p> content1</p>
                <p> content1</p>
                <p> content12</p>
            </div>
            <div title="Title2"  style="padding: 10px;"> content2 <a href="#" onclick="addmenu()">addmenu</a>
            </div>
            <div title="Title3">content3
            </div>
        </div>
    </div>
    <div id="mainPanle" region="center" title="Main Title" style="overflow: hidden;">
        <div id="tabControl" class="easyui-tabs" fit="true" border="false">
            <div title="Tab1" style="padding: 20px; overflow: hidden;">
                <div style="margin-top: 20px;">
                    @RenderBody()
                    <h3>  jQuery EasyUI framework help you build your web page easily.</h3>
                    <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                    <li>using easyui you don't write many javascript code, instead you defines user-interface  by writing some HTML markup.</li>
                    <li>easyui is very easy but powerful.</li>
                </div>
            </div>
            <div title="Tab2" closable="true" style="padding: 20px;"> This is Tab2 width close button.</div>
            <div title="Tab3" icon="icon-reload" closable="true" style="overflow: hidden; padding: 5px;">
                <table id="tt2">
                </table>
            </div>
        </div>
    </div>
@*    <form id="form2">
    <div id="logRegion" style="display: none;">
        <textarea id="TraceConsole" rows="100" cols="160"></textarea>
        <a id="btnHide" href="javascript:void();" onclick="this.parentNode.style.display = 'none';">隐藏</a>
    </div>
    </form>*@
</body>
</html>
